<template>
    <el-skeleton animated :rows="11" :loading="loading">
        <div>
            <el-row class="row-bg" id="k1">
                <el-col :span="8">
                    <!-- <el-button style="display: flex;float: left;margin-left: 10px;" type="primary" size="small"
                    @click="xz">新增</el-button> -->
                </el-col>
                <el-col :span="8">
                    <el-input v-model="input" placeholder="输入姓名或账号查询" @input="handlerChange" class="input-with-select">
                        <template #append>
                            <el-button circle>
                                <el-icon>
                                    <Search />
                                </el-icon>
                            </el-button>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <el-row>
                        <el-col :span="6">
                        </el-col>
                        <el-col :span="6">
                        </el-col>
                        <el-col :span="6">
                                <el-checkbox label="不看禁用" v-model="noisBan" @change="changenb"/>
                        </el-col>
                        <el-col :span="6">
                                <el-checkbox label="只看激活" v-model="isAction" @change="changea"/>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px;">
            <el-table :data="tableData" v-loading="loadingshow" stripe style="width: 100%" border size="large">
                <el-table-column prop="id" v-if="false" label="编号" width="" />
                <el-table-column type="index" label="序号" align="center" width="80" />
                <el-table-column prop="name" label="姓名" />
                <el-table-column prop="account" label="账号" width="" />
                <el-table-column prop="isBan" label="禁用" width="">
                    <template #default="scope">
                        <el-tag type="danger" v-if="scope.row.isBan == 1">
                            是
                        </el-tag>
                        <el-tag v-else>
                            否
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="isActive" label="激活" width="">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.isActive == 1">
                            是
                        </el-tag>
                        <el-tag v-else>
                            否
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="220">
                    <template #default="scope">
                        <el-tag v-if="(scope.row.isBan == 1 || scope.row.isActive == 0)" effect="light" type="info" size="large">
                            禁用或未激活用户无法授权
                        </el-tag>
                        <el-button v-else type="primary" size="small" @click="authorization(scope.row)">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div id="k2">
                <el-pagination v-model:current-page="page" v-model:page-size="limit" :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </el-skeleton>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { getUsers } from '../../../api/Right/give/index'
import router from '@/router'
import { useRoute } from 'vue-router'
export default defineComponent({
    setup() {
        const data = reactive({
            tableData: [],
            loadingshow: false,
            loading: true,
            page: 1,
            limit: 10,
            total: 0,
            key: '',
            isBan: '' as any,
            isActive: '' as any,
            account: '',
            input: '',
            noisBan:'' as any,//不看禁用，
            isAction:'' as any//只看激活
        })

        const Route = useRoute();

        const events = {
            getdata(key: any, isBan: any, isActive: any, account: any) {
                getUsers({
                    id:Route.query.id,
                    page: data.page,
                    limit: data.limit,
                    key: key,
                    isBan: isBan,
                    isActive: isActive,
                    account: account
                }).then((res: any) => {
                    data.total = res.data.total
                    data.tableData = res.data.data
                    data.loading = false,
                        data.loadingshow = false
                })
            },
            //分页
            handleSizeChange(val: any) {
                data.limit = val
                events.getdata(data.key, data.isBan, data.isActive, data.account);
                data.loadingshow = true;
            },
            handleCurrentChange(val: any) {
                data.page = val
                events.getdata(data.key, data.isBan, data.isActive, data.account);
                data.loadingshow = true;
            },
            handlerChange(e: any) {
                data.loadingshow = true;
                data.key = e;
                events.getdata(data.key, data.isBan, data.isActive, data.account);
                if (!e) {
                    data.key = "";
                    events.getdata(data.key, data.isBan, data.isActive, data.account);
                }
            },
            //用户授权
            authorization(obj:any){
                data.loadingshow = true
                sessionStorage.setItem("data", JSON.stringify({name:obj.name,account:obj.account}));
                setTimeout(() => {
                    data.loadingshow = false
                    router.push("/right/give/user?id=" + obj.id)
                }, 1500)
            },
            //选中不看禁用
            changenb(){
                data.loadingshow = true;
                if (data.noisBan) {
                    events.getdata(data.key, data.isBan=0, data.isActive, data.account);
                } else {
                    events.getdata(data.key, data.isBan=-1, data.isActive, data.account);
                }
            },
            //选中只看激活
            changea(){
                data.loadingshow = true;
                if (data.isAction) {
                    events.getdata(data.key, data.isBan, data.isActive=1, data.account);
                } else {
                    events.getdata(data.key, data.isBan, data.isActive=-1, data.account);
                }
            }
        }


        onMounted(() => {
            events.getdata(data.key, data.isBan, data.isActive, data.account)
        })

        return {
            ...toRefs(data),
            ...events
        }
    },
})
</script>
<style>
#k1 {
    margin-left: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
}

#k2 {
    margin-top: 10px;
    height: 50px;
    border: 1px paleturquoise solid;
    border-radius: 5px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
</style>